import React from 'react';
import classnames from 'classnames';
import './index.less';

type IconProps = {
  type: string;
  /**
   * default symbol(svg)
   */
  mode?: 'symbol' | 'font-class';
  className?: string;
  onClick?: (
    e: React.MouseEvent<SVGSVGElement, MouseEvent> | React.MouseEvent<HTMLElement, MouseEvent>,
  ) => void;
};
const Icon: React.FC<IconProps> = (props) => {
  const { type, mode = 'symbol', className, onClick } = props;
  if (mode === 'symbol') {
    return (
      <svg className={classnames('z-icon', className)} onClick={onClick} aria-hidden="true">
        <use xlinkHref={`#${type}`} />
      </svg>
    );
  }
  return <i className={classnames('z-icon', `iconfont ${type}`, className)} onClick={onClick} />;
};
export default Icon;
